<template>
  <div class="site-settings views-container" element-loading-background="rgba(0, 0, 0, 0.8)">
    <div class="wlm-form">
      <div class="wlm-form-header">绑定账号：{{user_name}}</div>

      <div style="margin:50px;" v-loading="loading">
        <el-row>
          <el-col :span="5" v-for="(item,index) in wechatData" :key="index" :offset="1" style="margin-bottom:50px;width:250px;">
            <el-card :body-style="{ padding: '0px' }">
              <img :src="item.headimgurl" class="image" />
              <div style="padding: 14px;">
                <span style="margin-bottom:10px;">微信昵称：{{item.nickname}}</span>
                <svg-icon
                  v-if="item.sex === 1"
                  style="font-size:20px;vertical-align: middle;"
                  icon-class="man"
                />

                <svg-icon
                  v-if="item.sex !== 1"
                  style="font-size:20px;vertical-align: middle;"
                  icon-class="woman"
                />
                <el-tooltip class="item" effect="dark" content="已订阅" placement="top">
                  <img
                    style="float:right"
                    height="20"
                    width="20"
                    :src="require('@/assets/image/10.png')"
                    alt
                  />
                </el-tooltip>
                <p>地址：{{item.country+'-'+item.province+'-'+item.city}}</p>
                <div class="bottom clearfix">
                  <time class="time">{{item.subscribe_time}}</time>
                  <el-button type="text" class="button" @click="unBind(item.openid)">取消绑定</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- <div class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
      <el-button size="small" type="primary">保存</el-button>
    </div> -->
  </div>
</template>

<script>
import { nobindQrcode, showWechatUser } from '@/api/user'
export default {
  computed: {},
  data() {
    return {
      user_id: this.$route.query.user_id,
      user_name: this.$route.query.user_name,
      wechatData: [],
      loading: true
    }
  },
  created() {
    this.showWechatUser()
  },
  methods: {
    unBind(open_id) {
      this.$confirm('此操作将会取消该用户的微信绑定, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          nobindQrcode({ user_id: this.user_id, open_id }).then((res) => {
            if (res.data.code == 1) {
              this.$message.success(res.data.msg)
              this.loading = true
              this.showWechatUser()
            } else {
              this.$message.error(res.data.msg)
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    showWechatUser() {
      showWechatUser({ user_id: this.user_id }).then((res) => {
        if (res.data.code == 1) {
          this.wechatData = res.data.data
          this.loading = false
        } else {
          this.$message.error(res.data.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.management-user {
  .orbox {
    background: #ffeee6;
    padding: 20px;
    margin: 20px 20px 0;
  }
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
